<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片加载</title>
</head>
<body>
    
</body>
</html>

<script>
    //下面是图片后设置图片边框，也需要使用回调函数处理，代码嵌套比较复杂
    //最先执行的是最顶层的   而方法是在最后执行的
    //还有这里使用了轮询的方式，当一个图片加载完毕之后去执行这个图片所对应的方法
    //类似于  一个家庭主妇  要做饭  洗衣服  扫地   
    function loadImage(file,resolve,reject){
        const image = new Image();
        image.src = file;
        image.width = 50;
        image.onload = () => {
            resolve(image);   
        };
        image.onerror = () => {
            reject(new Error("load fail"));
        }
        //图片加载完毕之后将图片现实在页面上
        document.body.appendChild(image);
    }

    let file = 'load.jpg';
    for(let i = 0 ; i < 2000; i++){
        loadImage(
        file,
        (image) => {
            console.log('我是执行图片的');
            image.style.border = "5px solid red";
        },
        (error) => {
            console.log(error)
        }
        );
    }

    console.log('我是最先执行的');

   

</script>